<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Cover - UIkit tests</title>

        <script src="../_test.js"></script>
        <style type="text/css">

            .test-bg { background-image: url(http://unsplash.it/1600/1200); }
            .test-height { height: 300px; }

            .test-text {
                font-size: 50px;
                color: #fff;
            }

        </style>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Cover</h1>

            <h2>Cover Background</h2>

            <h3>Fixed Height</h3>
            <div class="uk-cover-background test-bg test-height uk-flex uk-flex-center uk-flex-middle">
                <div class="test-text">Text</div>
            </div>

            <h3>Responsive Height</h3>
            <div class="uk-cover-background uk-position-relative test-bg">
                <img class="uk-invisible" src="http://unsplash.it/600/400" width="600" height="400" alt="">
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Viewport Height</h3>
            <div class="uk-cover-background uk-height-viewport test-bg uk-flex uk-flex-center uk-flex-middle">
                <div class="test-text">Text</div>
            </div>

            <h2>Cover Object</h2>

            <h3>Image Fixed Height</h3>
            <div class="test-height uk-cover uk-position-relative">
                <img class="uk-cover-object" src="http://unsplash.it/600/400" width="600" height="400" alt="">
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Video Fixed Height</h3>
            <div class="test-height uk-cover uk-position-relative">
                <video class="uk-cover-object" width="600" height="400" autoplay loop muted controls>
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test1" type="video/mp4">
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test1" type="video/ogg">
                </video>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Responsive Height</h3>
            <div class="uk-cover uk-position-relative">
                <img class="uk-invisible" src="http://unsplash.it/600/400" width="600" height="400" alt="">
                <video class="uk-cover-object uk-position-absolute" width="600" height="400" autoplay loop muted controls>
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test2" type="video/mp4">
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test2" type="video/ogg">
                </video>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Viewport Height</h3>
            <div class="uk-height-viewport uk-cover uk-position-relative">
                <video class="uk-cover-object" width="600" height="400" autoplay loop muted controls>
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4?test3" type="video/mp4">
                    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv?test3" type="video/ogg">
                </video>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h2>Cover Iframes</h2>

            <h3>Youtube Fixed Height</h3>
            <div class="test-height uk-cover uk-position-relative">
                <iframe data-uk-cover src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen></iframe>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Vimeo Fixed Height</h3>
            <div class="test-height uk-cover uk-position-relative">
                <iframe data-uk-cover src="http://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;autoplay=1&amp;loop=1&amp;setVolume=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Responsive Height</h3>
            <div class="uk-cover uk-position-relative">
                <img class="uk-invisible" src="http://unsplash.it/600/400" width="600" height="400" alt="">
                <iframe class="uk-position-absolute" data-uk-cover src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen></iframe>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

            <h3>Viewport Height</h3>
            <div class="uk-height-viewport uk-cover uk-position-relative">
                <iframe data-uk-cover src="http://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent" width="560" height="315" frameborder="0" allowfullscreen></iframe>
                <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
                    <div class="test-text">Text</div>
                </div>
            </div>

        </div>

    </body>
</html>
